<template>
  <div class="app-container">
    <!-- 步骤导航 -->
    <el-steps 
      :active="activeStep" 
      finish-status="success"
      align-center
      class="my-6"
    >
      <el-step title="申请入住" :icon="Edit" />
      <el-step title="入住评估" :icon="Check" />
      <el-step title="入住审批" :icon="DocumentChecked" />
      <el-step title="入住配置" :icon="Tools" />
      <el-step title="签约办理" :icon="Trophy" />
    </el-steps>

    <!-- 子组件容器 -->
    <el-card class="mt-4">
      <component
        :is="currentComponent"
        :form-data="formData[activeStep]"
        :task-id="route.query.taskId"
        :process-instance-id="route.query.processInstanceId"
        @update-form="updateFormData"
      />
    </el-card>

    <!-- 底部操作按钮 -->
    <div class="step-buttons mt-4" style="text-align: right;">
      <el-button 
        v-if="activeStep > 0" 
        @click="handlePrevFromChild"
        style="margin-right: 10px;"
      >
        上一步
      </el-button>

      <el-button 
        type="primary" 
        @click="activeStep < stepComponents.length - 1 ? handleNextFromChild() : handleComplete()"
      >
        {{ activeStep < stepComponents.length - 1 ? '下一步' : '完成' }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Check, DocumentChecked, Tools, Trophy } from '@element-plus/icons-vue'

// ===== 子组件导入 =====
import ApplyCheckIn from './components/ApplyCheckIn.vue'  
import CheckInAssess from './components/CheckInAssess.vue'
import CheckInApproval from './components/CheckInApproval.vue'  
import CheckInConfig from './components/CheckInConfig.vue'
import ContractSign from './components/ContractSign.vue'

// ===== 路由对象 =====
const route = useRoute()

// ===== 当前步骤索引 =====
const activeStep = ref(0)

// ===== 每个步骤的数据 =====
const formData = ref([{}, {}, {}, {}, {}])

// ===== 步骤与组件对应关系（顺序很重要） =====
const stepComponents = [
  ApplyCheckIn,     // 0 - 申请入住
  CheckInAssess,    // 1 - 入住评估
  CheckInApproval,  // 2 - 入住审批
  CheckInConfig,    // 3 - 入住配置
  ContractSign      // 4 - 签约办理
]

// ===== 当前显示组件 =====
const currentComponent = computed(() => stepComponents[activeStep.value])

// ===== 页面加载后根据 taskName 判断当前步骤 =====
onMounted(() => {
  const taskName = route.query.taskName || ''
  console.log('当前任务名称：', taskName)

  if (taskName.includes('入住评估')) activeStep.value = 1
  else if (taskName.includes('审批')) activeStep.value = 2
  else if (taskName.includes('入住选配-处理')) activeStep.value = 3
  else if (taskName.includes('签约办理-处理')) activeStep.value = 4
  else activeStep.value = 0

  console.log('跳转后当前步骤索引：', activeStep.value)
})

// ===== 上一步按钮 =====
const handlePrevFromChild = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  } else {
    ElMessage.info('已经是第一个步骤')
  }
}

// ===== 下一步按钮 =====
const handleNextFromChild = () => {
  if (activeStep.value < stepComponents.length - 1) {
    activeStep.value++
  } else {
    handleComplete()
  }
}

// ===== 全流程完成确认 =====
const handleComplete = () => {
  ElMessageBox.confirm('是否确认完成所有入住流程？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'info',
  }).then(() => {
    console.log('✅ 全部流程数据：', formData.value)
    ElMessage.success('所有流程完成！')
  })
}

// ===== 子组件更新数据 =====
const updateFormData = (data) => {
  formData.value[activeStep.value] = {
    ...formData.value[activeStep.value],
    ...data
  }
  console.log(`步骤 ${activeStep.value + 1} 数据更新：`, data)
}
</script>

<style scoped>
.app-container {
  width: 100%;
  max-width: none;
  padding: 30px;
  background: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}
.el-card {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding-bottom: 20px;
}
.step-buttons {
  margin-top: 20px;
}
</style>
